<template>
  <div class="total">
        <div class="aaa"> </div>
        
        <div class="header">
            <router-link to="news">新闻</router-link>
            <a href="#">文娱</a>
           <a href="#">社会</a>
           <a href="#">国际</a>
           <a href="#">图片</a>
           <a href="#">科技</a>
           <a href="#">生活</a>
           <a href="#">人物</a>
           <a href="#">军事</a>
           <a href="#">法治</a>
      
           <el-dropdown>
            <span class="aa">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>国情</el-dropdown-item>
                <el-dropdown-item>数据</el-dropdown-item>
                <el-dropdown-item>服务</el-dropdown-item>
            </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="main">
            <div class="main1">
                <el-carousel :interval="2000" arrow="always" height="250px"  @change="changePandT" >
                    <el-carousel-item v-for="(item,index) in carouselIMG" :key="index">
                        <img :src="item"/> 
                    </el-carousel-item>
                </el-carousel>
            </div>
                <div class="textRightBox" >
                    <p class="p1">{{ textRight.title}}</p>
                    <p class="p2">{{ textRight.content }}</p>
                </div>
        </div>
        <div class="main2">
            <div class="left" >
                <h4>要闻</h4>
                <hr>
                    <div v-for="(item,index) in newslist" :key="index">
                        <div class="title">
                            <div class="title_l">{{item.title}}</div>  
                            <div class="title_r">{{item.time}}</div>
                         </div>
                        <p> {{item.content}}</p> 
                    </div>
            </div>
             
            <div class="right" >
                <h4>社会</h4>
                <hr>
                <ul>
                    <li> 李克强会见来京述职的李家超、贺一诚   </li>
                    <li> 李克强主持召开国务院常务会议部署深入抓好稳经济一揽子政策措施落地见效等   </li>
                    <li> 王毅应约同美国国务卿布林肯通电话·   </li>
                    <li>金融支持实体力度持续加大   </li>
                    
                </ul>
                <h4>专题</h4>
                <hr>
                <img src="../assets/5.jpg" alt="#" width="200px"> <br>
                <a href="">李克强出席东亚合作领导人系列会议并访柬</a><br>
                <a href="">国家规章库 </a> | <a href=""> 政务公开交流</a>  
            </div>
        </div>
        <div class="footer" >
           
        链接:
        <a href="http://www.npc.gov.cn/">全国人大</a> │
        <a href="http://www.cppcc.gov.cn/">全国政协</a> │
        <a href="https://www.ccdi.gov.cn/">国家监察委员会</a> │
        <a href="https://www.court.gov.cn/">最高人民法院</a> │
        <a href="https://www.spp.gov.cn/">最高人民检察院</a> 
        </div>
        <div class="aaa"> </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
        textRight: { title: "", content: ""},
        carouselIMG:[
            require('../assets/1.jpg'),
            require('../assets/2.jpg'),
            require('../assets/3.jpg'),
            require('../assets/4.jpg'),
        ],
        list:[     
            {
                content:"12月24日,第十八届中国(长沙)国际汽车博览会在长沙国际会展中心开幕。本届车展由长沙市人民政府、中国汽车工业协会联合主办，以'汽'气势磅礴为主题,吸引了近百个品牌的1000余款车型参展,展览面积近10万平方米。",
                title:"第十八届中国（长沙）国际汽车博览会开幕"
            },
            {
                content:"12月23日,在安徽省池州市，中铁十一局池(州)黄（山)铁路站前一标完成最后一棍箱梁架设任务,标志着该标段转入线上施工阶段。池黄铁路全长约125公里,设计时速350公里,是武(汉)杭(州)快速铁路通道的重要组成部分。",
                title:"池黄铁路架梁忙"
            },
            {
                content:"新年临近，山东省青岛市城阳区流亭街道有序开放年货大集，满足百姓生活需求。",
                title:"年货大集迎新年"
            },
            {
                content:"新年、春节临近，河北省遵化市各家核桃专业合作社一片忙碌景象，农民们在场院和车间忙着晾晒、精选、包装核桃，供应“双节”市场。",
                title:"河北遵化:加工核桃迎'双节'"
            },
        ],
        newslist:[]
        }
    },
    methods: {

// 上方轮播change事件

    changePandT(index) {
      this.textRight.content = this.list[index].content;
      this.textRight.title = this.list[index].title;
     
    },

},
mounted(){
   this.$axios.get('http://127.0.0.1:8090/vue/listthree').then(
				res => { //eslint-disable-line nothis.list.name-unused-vars
					this.newslist = res.data
					console.log(this.newslist);
				});
  
}
    

}
</script>

<style scoped>
  .total{
        width: 100%;
        height: 100%;
        background-color: rgb(234, 231, 231);;
      }
      .aaa{
        width: 100%;
        height: 30px;
        background-color: white;
      }
    .header{
      
        width: 90%;
        height: 45px;
        margin: auto;
        text-align: center;
        background-color: rgb(169, 177, 240);

    }
    .header a{
        width: 50px;
        margin-right: 50px;
        text-decoration: none;
        color: black;
        line-height: 45px;
    }
    .main{
        padding-top:5px ;
        width: 90%;
        height: 260px;
        margin: auto;
        background-color: rgba(255, 255, 255, 0.555);

    }
    .main1{
      width:50%;
      height: 250px; 
      background-color:rgba(241, 224, 224, 0.89);
      float: left;
    }
    .textRightBox{
        width: 45%;
        height: 250px;
        float: right;
    }
    .p1{
        font-size: 25px;
        font-weight: normal;
    }
    .main2{
        width: 90%;
        height: 450px;
        margin: auto;
        background-color: white;
    }
    .left{
        width: 60%;
        float: left;
        height: 450px;
        padding:0px 15px 0px 10px;
        border-right: 1px solid #ccc;
    }
    .title{
     
        width: 100%;
        height: 30px;

    }
    .title_l{
        width: auto;
        height: 30px;
        float: left;
        line-height: 30px;
        font-size: 20px;
    }
    .title_r{
        width: auto;
        height: 30px;
        float: left;
        line-height: 30px;
        font-size: 7px;
        margin-left: 20px;
    }
    .left p{
        font-size: 5px;
        margin-bottom: 30px;
    }

    .right{
        width: 35%;
        float: right;
        height: auto;
        padding-right: 10px;
    }
    .footer{
        width: 90%;
        height: 45px;
        margin: auto;
        background-color: white;
        line-height: 45px;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.555);
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        margin-bottom: 40px;
    }
    .footer a{
        text-decoration: none;
        margin:0px 10px 0px 10px ;
        color:black;
    }
</style>